<!-- 
 * @author czj
 * @date 2024-04-15 13:55
 * @description: //甘特图
!-->
<template>
  <div class="container">
    <el-table :data="tableData" style="width: 100%" height="100%" border>
      <el-table-column
        prop="title"
        label="设备"
        align="center"
        fixed="left"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="部位"
        align="center"
        fixed="left"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="检修项目"
        align="center"
        fixed="left"
        width="300"
      >
      </el-table-column>
      <el-table-column prop="title" label="日期" align="center" fixed="left">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in monthData"
        :key="`col_${index}`"
        :label="item"
        align="center"
      >
        <el-table-column
          v-for="(el, elIndex) in ganttData[item]"
          :key="`col_${elIndex}`"
          :label="el.date.slice(5)"
          align="center"
        >
          <el-table-column :label="getWeek(el.date)" align="center" width="120">
            <template v-slot="scope">
              <!-- <div
                v-if="scope.row[`status${scope.cellIndex}`] == 1"
                class="progress"
              ></div> -->
              <el-progress
                v-if="scope.row[`status${scope.cellIndex}`] == 1"
                :stroke-width="39"
                :percentage="100"
                :show-text="false"
                text-inside
                striped
              ></el-progress>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const startTime = window['$Dayjs'](new Date()).format('YYYY-MM-DD')
  const endTime = window['$Dayjs'](new Date().getTime() + 14 * 86400000).format(
    'YYYY-MM-DD'
  )
  const tableData = ref([
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
    { title: '测试1', dayList: [1, 1, 1, 1, 0, 0, 0, 0] },
    { title: '测试2', dayList: [1, 1, 1, 1, 1, 0, 0, 0] },
    { title: '测试3', dayList: [1, 1, 1, 0, 0, 0, 0, 0] },
  ])
  const monthData = ref([])
  const ganttData = ref({})
  monthData.value = getMonthArry(startTime, endTime)
  const dateNumber = getAllDate(startTime, endTime)
  monthData.value.forEach(res => {
    const dateArr = dateNumber.filter(rs => rs.indexOf(res) !== -1)
    ganttData.value[res] = dateArr.map(item => {
      return {
        date: item,
        num: item.split('-')[2],
      }
    })
  })

  tableData.value.forEach(item => {
    item.dayList.forEach((el, elIndex) => {
      item[`status${elIndex + 4}`] = el
    })
  })
  console.log(monthData.value)
  console.log(dateNumber)
  console.log(ganttData.value)
  console.log(tableData.value)

  // 获取时间段内一共有几个月
  function getMonthArry(startDate, endDate) {
    var d1 = startDate
    var d2 = endDate
    var dateArry = []
    var s1 = d1.split('-')
    var s2 = d2.split('-')
    var mCount = 0
    if (parseInt(s1[0]) < parseInt(s2[0])) {
      mCount =
        (parseInt(s2[0]) - parseInt(s1[0])) * 12 +
        parseInt(s2[1]) -
        parseInt(s1[1]) +
        1
    } else {
      mCount = parseInt(s2[1]) - parseInt(s1[1]) + 1
    }
    if (mCount > 0) {
      var startM = parseInt(s1[1])
      var startY = parseInt(s1[0])
      for (var i = 0; i < mCount; i++) {
        if (startM < 12) {
          dateArry[i] = startY + '-' + (startM > 9 ? startM : '0' + startM)
          startM += 1
        } else {
          dateArry[i] = startY + '-' + (startM > 9 ? startM : '0' + startM)
          startM = 1
          startY += 1
        }
      }
    }
    return dateArry
  }

  // 起止日期获取中间日期
  function getAllDate(startDate, endDate) {
    let dateArr = []
    let startArr = startDate.split('-')
    let endArr = endDate.split('-')
    let db = new Date()
    db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
    let de = new Date()
    de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
    let unixDb = db.getTime()
    let unixDe = de.getTime()
    let stamp
    const oneDay = 24 * 60 * 60 * 1000
    for (stamp = unixDb; stamp <= unixDe; ) {
      dateArr.push(window['$Dayjs'](new Date(stamp)).format('YYYY-MM-DD'))
      stamp = stamp + oneDay
    }
    return dateArr
  }

  // 根据日期获取周几
  function getWeek(date) {
    var dateArray = date.split('-')
    date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2])
    return '周' + '日一二三四五六'.charAt(date.getDay())
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    padding: 20px;
    .progress {
      width: 100%;
      height: 40px;
      background: #409eff;
    }
  }

  ::v-deep(.el-table) {
    .el-table__cell {
      padding: 0;
      height: 40px;
    }
    .cell {
      padding: 0;
    }

    .el-progress-bar__inner {
      border-radius: 0;
    }
    .el-progress-bar__outer {
      border-radius: 0;
    }
  }
</style>
